<style>
.ovx-h {overflow-x:hidden;}
.login-register {overflow:hidden;position:absolute;top:123px;right:0;z-index:4;padding:5em 10% 0;background-color: rgba(255,255,255,.97) !important;background-color:#fff;filter:alpha(opacity=.97);}
.login-register form {position:relative;width:440px;}
.login-register dt {font-size:2.875em;}
.login-register input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {padding:0 1.875em;font-weight:normal;font-style:italic;color: #999;}
.login-register input:-moz-placeholder, textarea:-moz-placeholder {font-weight:normal;font-style:italic;color: #555;}
.login-register input::-moz-placeholder, textarea::-moz-placeholder {font-weight:normal;font-style:italic;color: #555;}
.login-register input:-ms-input-placeholder, textarea:-ms-input-placeholder {font-weight:normal;font-style:italic;color: #ccc;}
.login-register input {width:100%;height:3.75em;line-height:3.75em;border:2px solid #999;}
.login-register .checkbox {width:auto;height:auto;line-height:inherit;}
.login-register .btn {height:2.72em;line-height:2.72em;padding:0;border:0 none;font-size:1.375em;}
.login-register .vi-code {width:66%;}
.login-register .btn.get-vi-code {padding-right:15px;padding-left:15px;}
.login-register .heading {background-color:#333;}
.login-register .qq-login i {display:block;width:50px;height:50px;margin-bottom:5px;background:url(/statics/front/images/icons/qq.png) no-repeat;}
</style>
<link href="/statics/front/showtip/showtips.css" type="text/css" rel="stylesheet">
<script src="/statics/front/showtip/showTip.js" type="text/javascript"></script>
<div class="mask js-mask"></div>
<div class="hide login-register js-login-register">
  <form action="<?php echo url('user/login');?>" method="post" class="auto js-login-form">
    <dl class="login-box">
      <dt><?php echo L('login');?></dt>
      <dd class="mb1x align-right">
        <a href="javascript:;" class="green font-md js-toggle">注册新帐户</a>
      </dd>
      <dd class="mb2x">
        <input type="text" id="login_phone" placeholder="手机号">
      </dd>
      <dd class="mb2x">
        <input type="password" id="login_password" placeholder="登录密码">
      </dd>
      <dd class="mb2x align-right">
        <a href="javascript:;" rel="nofollow" class="italic js-to-get-psd" style="text-decoration:underline;"><?php echo L('get_passwd');?></a>
      </dd>
      <dd>
        <input type="hidden" id="login_src" value="<?php echo isset($src) ? $src : null; ?>">
        <input type="hidden" id="login_action" value="<?php echo isset($action) ? $action : null; ?>">
        <input type="hidden" id="login_goback" value="<?php echo $http;?>">
        <input id="login_btn" value="<?php echo L('login');?>" class="btn">
      </dd>
      <dd>
        <div class="mb2x heading">
          <strong style="font-size:1.375em;">第三方登录</strong>
        </div>
        <a href="<?php echo url('user/qq_login');?>" class="font-md qq-login">
          <i></i>
          <?php echo L('login_with_qq');?>
        </a>
      </dd>
    </dl>
  </form>
  <form action="<?php echo url('user/register');?>" method="post" autocomplete="off" class="hide auto js-register-form">
    <dl class="register-box">
      <dt><?php echo L('register');?></dt>
      <dd class="mb1x align-right">
        <a href="javascript:;" class="js-toggle">已有帐号</a>
      </dd>
      <dd class="mb2x">
        <input type="text" name="phone" id="register_phone" placeholder="手机号">
      </dd>
      <dd class="mb2x">
        <input type="text" name="authenticode" id="register_code" placeholder="验证码" class="vi-code">
        <button type="button" class="btn get-vi-code js-get-vi-code get_code_by_register">获取验证码</button>
      </dd>
      <dd class="mb2x">
        <input type="password" name="password" id="register_pwd" placeholder="设置密码">
      </dd>
      <dd class="mb2x">
        <input type="password" name="confirm_password"  id="register_confirm_pwd" placeholder="再次输入">
      </dd>
      <dd class="mb2x align-center font-md italic green">
        <label>
          <input type="checkbox" name="is_email" id="register_is_email" checked class="vm checkbox">
          <span class="vm"><?php echo L('join_our_mailing');?></span>
        </label>
      </dd>
      <dd>
        <input type="hidden" name="src" id="register_src" value="<?php echo isset($src) ? $src : null; ?>">
        <input type="hidden" name="action" id="register_action" value="<?php echo isset($action) ? $action : null; ?>">
        <input  id="register_btn"  value="<?php echo L('register');?>" class="btn">
      </dd>
      <dd>
        <div class="mb2x heading">
          <strong style="font-size:1.375em;">第三方登录</strong>
        </div>
        <a href="<?php echo url('user/qq_login');?>" class="font-md qq-login">
          <i></i>
          <?php echo L('login_with_qq');?>
        </a>
      </dd>
    </dl>
  </form>
  <form name="loginForm" method="post" autocomplete="off" class="hide auto js-get-psd-form">
    <dl>
      <dt class="mb1x">找回密码</dt>
      <dd class="mb1x align-right">
        <a href="javascript:;" class="js-toggle">去注册</a>
      </dd>
      <dd class="mb2x">
        <input type="text" id="find_phone" placeholder="手机号">
      </dd>
      <dd class="mb2x">
        <input type="text" id="find_authenticode" placeholder="验证码" class="vi-code">
        <button type="button" class="btn get-vi-code js-get-vi-code find_get_code_btn">获取验证码</button>
      </dd>
      <dd>
        <input id="find_btn" value="登 录" class="btn">
      </dd>
    </dl>
  </form>
</div>
<script>
var countdown=60; 
function settime(val) { 
	if (countdown == 0) {    
		val.html("获取验证码"); 
		countdown = 60; 
	} else { 
		val.html(countdown + "秒后重发"); 
		countdown--; 
		setTimeout(function() {
			settime(val)
		},
		1000)
	} 

}
$(function () {
	//找回密码
	$('#find_btn').on('click',function(){
		var telphone 	= $("#find_phone").val();
		var code	 	= $("#find_authenticode").val(); 
		if(!telphone){
			showTip('请输入手机号码！');return false;
		}
		var reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
		if (!reg.test(telphone)) {
			showTip("请输入正确的手机号！");return false;
		}
		if(!code || code.length!=6){
			showTip("请输入正确的验证码！");return false;
		}
		var _this = $(this);
		$.ajax({
			type:"POST",
			url: "/user/found_pwd_by_phone",
			data:{mobile:telphone,code:code},
			dataType:"json",
			success:function(obj){
				showTip(obj.message);
				if(obj.code==200){
					_this.unbind("click");
					setTimeout(function() {
						window.location.href=obj.url;
					},2000)
				}	
			}
		});
	});
	//找回密码获取验证码
	$('.find_get_code_btn').on('click',function(){
		var telphone 	= $("#find_phone").val();
		if(!telphone){
			showTip('请输入手机号码！');return false;
		}
		var reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
		if (!reg.test(telphone)) {
			showTip("请输入正确的手机号！");return false;
		}
		var _this = $(this);
		$.ajax({
			type:"POST",
			url: "/api/found_pwd_code",
			data:{mobile:telphone},
			dataType:"json",
			success:function(obj){
				showTip(obj.message);
				if(obj.code==200){
					_this.unbind("click");
					_this.css({
						'color':'#878787',
						'background-color':'#D2D2D2'
					})
					settime(_this);
				}	
			}
		});
	});
	//点击登录
	$('#login_btn').on('click',function(){
		var telphone	= $('#login_phone').val();
		var pwd			= $('#login_password').val();
		var src			= $('#login_src').val();
		var action		= $('#login_action').val();
		var goback		= $('#login_goback').val();
		if(!telphone){
			showTip('请输入登录账号！');return false;
		}
		if(!pwd){
			showTip("请输入密码！");return false;
		}
		$.ajax({
			type:"POST",
			url: "/user/login_ajax",
			data:{mobile:telphone,pwd:pwd,src:src,action:action,goback:goback},
			dataType:"json",
			success:function(obj){
				showTip(obj.message);
				if(obj.code==200){
					window.location.href=obj.url;
				}
			}
		});
	});
	//点击注册
	$('#register_btn').on('click',function(){
		var telphone 	= $("#register_phone").val();
		var code	 	= $("#register_code").val(); 
		var pwd 		= $("#register_pwd").val();
		var confirm_pwd = $("#register_confirm_pwd").val();
		var register_src= $("#register_src").val();
		var register_action = $("#register_action").val();
		if(!telphone){
			showTip('请输入手机号码！');return false;
		}
		var reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
		if (!reg.test(telphone)) {
			showTip("请输入正确的手机号！");return false;
		}
		if(!code || code.length!=6){
			showTip("请输入正确的验证码！");return false;
		}
		if(!pwd){
			showTip("请设置密码！");return false;
		}
		if(!confirm_pwd){
			showTip("请设置确认密码！");return false;
		}
		if(pwd!==confirm_pwd){
			showTip("两次密码不同！");return false;
		}
		$.ajax({
			type:"POST",
			url: "/user/register",
			data:{mobile:telphone,code:code,pwd:pwd,confirm_pwd:confirm_pwd,src:register_src,action:register_action},
			dataType:"json",
			success:function(obj){
				showTip(obj.message);
				if(obj.code==200){
					window.location.reload();
				}
			}
		});
	});
	//获取验证码
	$('.get_code_by_register').on('click',function(){
		var telphone 	= $("#register_phone").val();
		if(!telphone){
			showTip('请输入手机号码！');return false;
		}
		var reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
		if (!reg.test(telphone)) {
			showTip("请输入正确的手机号！");return false;
		}
		var _this = $(this);
		$.ajax({
			type:"POST",
			url: "/api/code_send",
			data:{mobile:telphone},
			dataType:"json",
			success:function(obj){
				showTip(obj.message);
				if(obj.code==200){
					_this.unbind("click");
					_this.css({
						'color':'#878787',
						'background-color':'#D2D2D2'
					})
					settime(_this);
				}	
			}
		});
	});
  var $body = $('body'),
  $win = $(window),
  $header = $('.js-header'),
  $loginRegister = $('.js-login-register'),
  $loginForm = $('.js-login-form'),
  $registerForm = $('.js-register-form'),
  $getPsdForm = $('.js-get-psd-form');

  $('.js-login').on('click', function () {
    var winHeight = $win.height(),
    scrollTop = $win.scrollTop(),
    widthVal = $loginRegister.outerWidth(),
    topVal = $header.outerHeight();

    if ($loginRegister.is(':hidden')) {
      $loginRegister.children('form').eq(0).removeClass('hide').nextAll('form').addClass('hide');
      $body.addClass('ovx-h');
      $loginRegister.removeClass('hide');
      widthVal = $loginRegister.outerWidth();

      if ($header[0]) {
        $loginRegister.css('top', topVal + scrollTop);
      }

      $loginRegister.css('height', winHeight - topVal);

      if (!$loginRegister.is(':animated')) {
        $loginRegister.css('right', - widthVal).animate({'right': 0}, 400, function () {
          $body.removeClass('ovx-h');
        });
      }
    } else {
      $body.addClass('ovx-h');

      if (!$loginRegister.is(':animated')) {
        $loginRegister.animate({'right': - widthVal}, 400, function () {
          $loginRegister.addClass('hide');
          $body.removeClass('ovx-h');
        });
      }
    }
  });

  $win.on('resize scroll', function () {
    var newTop;

    if ($loginRegister.is(':visible')) {
      newTop = $(this).scrollTop() + $header.outerHeight();
      $loginRegister.css('top', newTop);
    }
  });

  $loginForm
    .on('click', '.js-toggle', function () {
      $loginForm.addClass('hide');
      $registerForm.removeClass('hide');
    })
    .on('click', '.js-to-get-psd', function () {
      $loginForm.addClass('hide');
      $getPsdForm.removeClass('hide');
    });

  $registerForm.on('click', '.js-toggle', function () {
    $registerForm.addClass('hide');
    $loginForm.removeClass('hide');
  });

  $getPsdForm.on('click', '.js-toggle', function () {
    $getPsdForm.addClass('hide');
    $registerForm.removeClass('hide');
  });



  $loginForm.on('focus', 'input[name=phone], input[name=password]', function () {
    $loginForm.find('.js-login-error').remove();
  });






  $('.js-get-psd-form').validate({//找回密码
    errorElement: 'p',
    rules: {
      email: {
        required: true,
        email: true
      }
    },
    messages: {
      email: {
        required: "<?php echo L('input_email_addres');?>",
        email: "<?php echo L('_EMAIL_FORMAT_ERROR_');?>"
      }
    }
  });
});
</script>